<template>
  <el-container>
    <el-header
      height="25px"
      style="font-size:25px;font-weight:bold;padding:0px;"
    >
      <img
        src="../assets/火焰.png"
        alt=""
        style="width:25px;height:25px"
      > 热门问题
    </el-header>
    <el-main style="padding:0px;">
      <div style="border:solid #0C66AD;margin-top:10px;margin-bottom:5px;"></div>
      <li
        :title="item.title"
        v-for="(item,index) in threads"
        :key="index"
        class="study"
        @click="openDetails(item.tid)"
      >{{item.title}}
      </li>
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: 'Hotquestion',
  data () {
    return {
      threads: [],
    }
  },
  mounted() {
    this.$http.get("/api/thread/hot").then((res) => {
      // console.log(res.status);
      // console.log(res.data);
      this.threads = res.data.list;
    }).catch(function (error) {
      if (error.response) {
        // 请求已发出，但服务器响应的状态码不在 2xx 范围内
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else {
        // Something happened in setting up the request that triggered an Error
         console.log('Error', error.message);
      }
      console.log(error.config);
    })
  },
  methods: {
    openDetails(tid) {
      this.$router.push({
          name: 'answersheet',//页面名字
          path:"/answersheet",//页面路劲 和上面名字任意一个都可以
          query: {id: JSON.stringify(tid)} // 参数传值
        })
        setTimeout("window.location.reload()",10);
    },
  },
  // filters: {
  //   ellipsis (value) {
  //     if (!value) return ''
  //     if (value.length > 18) {
  //       return value.slice(0,18) + '...'
  //     }
  //     return value
  //   }
  // },
}
</script>

<style lang="less" scoped>
li {
  margin-top: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  font-size: 15px;
}
li:hover {
  color: #11b2b9;
}
.study {
  list-style: none;
  background-image: url("../assets/火焰.png");
  background-repeat: no-repeat;
  padding-left: 30px;
  background-size: 15px 15px;
}
</style>